<template>
    <div>
        <el-dialog
            :title="!form.id ? '新增' : '修改'"
            :visible.sync="visible"
            :close-on-click-modal="false">

            <div class="table_form_wrap">
                <el-form ref="form" :model="form" :rules="rules" @keyup.enter.native="handleSubmit()" label-width="120px">

                    <el-form-item label="日期名称" prop="calendarTitle">
                        <el-input placeholder="" v-model="form.calendarTitle" clearable style="width: 80%"></el-input>
                    </el-form-item>

                    <el-form-item label="开始日期" prop="startDate">
                        <el-date-picker
                            v-model="form.startDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择开始日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期" prop="endDate">
                        <el-date-picker
                            v-model="form.endDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择结束日期">
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item label="是否周末" prop="weekend">
                        <el-select v-model="form.weekend" placeholder="请选择">
                            <el-option label="否" :value="0"></el-option>
                            <el-option label="周末" :value="1"></el-option>
                            <el-option label="补班" :value="2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否节日" prop="holiday">
                        <el-select v-model="form.holiday" placeholder="请选择">
                            <el-option label="否" :value="0"></el-option>
                            <el-option label="是" :value="1"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" :rows="4" v-model="form.remarks" style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
            </div>


            <div slot="footer" class="dialog-footer">
                <el-button @click="visible = false">取 消</el-button>
                <el-button @click="handleSubmit()" type="primary" :submitLoading="submitLoading">提 交</el-button>
            </div>

        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            visible: false,
            submitLoading: false,

            form: {
                startDate: null,
                endDate: null,
                calendarTitle: null,
                weekend: 0,
                holiday: 0,
                remarks: null
            },
            rules: {
                calendarTitle: [
                    { required: true, message: '名称不能为空', trigger: 'blur' }
                ],
                startDate: [
                    { required: true, message: '开始日期不能为空', trigger: 'blur' }
                ],
                endDate: [
                    { required: true, message: '结束日期不能为空', trigger: 'blur' }
                ]
            }
        }
    },

    methods: {
        init() {
            const refs = this.$refs
            this.visible = true

            this.$nextTick(() => {
                refs['form'].resetFields()
            })
        },

        /**
         * 提交表单
         */
        async handleSubmit() {
            const refs = this.$refs
            this.submitLoading = true
            const valid = await refs['form'].validate().catch(() => {})
            if(valid) {
                console.log(this.form);
                const res = await this.$http({
                    url: `/hr/calendar/setHoliday`,
                    method: 'POST',
                    data: this.form
                })
                if (this.ResultMessage(res)) {
                    this.$emit('refreshDataList')
                    this.submitLoading = false
                    this.visible = false
                } else {
                    this.submitLoading = false
                }
            } else {
                this.submitLoading = false
            }
        }

    }
};
</script>

<style lang="scss" scoped></style>
